<template>
  <div>
    <template v-if="listData.length > 0">
      <el-row :gutter="24">
        <el-col class="mb20" v-for="(item,index) in listData" :key="index" :span="8">
          <el-card shadow="never" class="list-card">
            <div slot="header" class="tl-center">
              <span>{{item.moralityPlanName}}</span>
              <el-tooltip class="item" effect="dark" content="详情" placement="top">
                <i @click.stop="handleDetail(item)" class="fr curp fs16 el-icon-document" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="复制新增" placement="top">
                <i @click.stop="handleEdit(true, item)" class="fr curp mr10 fs16 el-icon-folder" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click.stop="handleDelete(item)" class="red mr10 fr curp fs16 el-icon-delete" />
              </el-tooltip>
            </div>
            <el-form label-width="130px">
              <el-form-item label="方案周期">
                <span>{{ item.moralityCycleName }}</span>
              </el-form-item>
              <el-form-item label="是否有党支部环节">
                <span>{{ item.branchStep === 1 ? '是' : '否' }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <el-tag :type="judgeType(item.state)">{{ judgeState(item.state) }}</el-tag>
              </el-form-item>
              <el-form-item label="创建人">{{ item.createUser }}</el-form-item>
              <el-form-item label="创建时间">{{ formatTime(item.createTime) }}</el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col class="tl-center nomoreWord" v-show="noMore">---- 这是我的底线 ----</el-col>
      </el-row>
    </template>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { planPage, planDelete } from '@/api/morality'
import { openNotification, judgeEvalState, judgeType } from '@/utils/util'
export default {
  data() {
    return {
      listData: [],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      noMore: false
    }
  },
  mounted() {
    this.handleGetList()
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll() {
      if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
        this.loadMore()
      }
    },
    loadMore() {
      console.log('loadMore', this.listData.length, this.total)

      if (this.queryParam.pageNo * 10 > this.total) {
        this.noMore = true
      } else {
        this.queryParam.pageNo += 1
        this.handleGetList(this.queryParam)
      }
    },
    judgeType(num) {
      return judgeType(num)
    },
    judgeState(num) {
      return judgeEvalState(num)
    },
    showCycleWord(id) {
      let str = ''
      this.selectData.map(v => {
        if (v.moralityCycleId === id) {
          str = v.moralityCycleName
        }
      })
      return str
    },
    handleEdit(bool, row) {
      this.$router.push({
        name: 'moralityCreateScheme',
        params: { row, type: 'edit' }
      })
    },
    handleDetail(row) {
      this.$router.push({
        name: 'moralitySchemeDetail',
        params: { row }
      })
      console.log('item', item)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await planPage(this.queryParam)

      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        if (this.queryParam.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...records]
        }
        this.total = total
        if (this.queryParam.pageNo * 10 > this.total) {
          this.noMore = true
        }
      } else {
        this.listData = []
        this.total = 1
      }
      this.loading = false
    },
    handleDelete(row) {
      console.log('row', row)
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.moralityPlanName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await planDelete(row.moralityPlanId, {})
          openNotification('success', '删除成功')
          const index = _this.listData.findIndex(v => v.moralityPlanId === row.moralityPlanId)
          _this.listData.splice(index, 1)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 10px;
}
</style>